<template>
  <div class="flex items-center flex-1 mx-32px b-1 b-[var(--el-border-color)] b-b-solid pb-10px">
    <!-- 歌曲信息 -->
    <div class="flex gap-[5px]">
      <el-image :src="currentSong.imageUrl" class="w-[84px] h-84px !rounded-6px">
        <template #placeholder>
          <div
            class="bg-black bg-op-40 absolute top-0 left-0 w-full h-full flex items-center justify-center"
          >
            <el-icon color="#fff" size="30"><Headset /></el-icon>
          </div>
        </template>
        <template #error>
          <div
            class="bg-black bg-op-40 absolute top-0 left-0 w-full h-full flex items-center justify-center"
          >
            <el-icon color="#fff" size="30"><Headset /></el-icon>
          </div>
        </template>
      </el-image>
      <div class="flex flex-col justify-center w-160px pr-10px">
        <div class="text-18px text-[rgba(54,54,54,1)] text-overflow-2">{{ currentSong.title }}</div>
        <div class="text-[16px] text-[rgba(194,194,194,1)]">{{
          currentSong.singer || formatTime(duration)
        }}</div>
      </div>
    </div>

    <!-- 音频controls -->
    <div class="flex gap-[18px] items-center">
      <div class="icon-button-bg" @click="seekTo(0)">
        <Icon icon="svg-icon:shangyishou" :size="16" />
      </div>
      <div class="icon-button-bg !w-54px !h-54px" @click="togglePlay">
        <Icon :icon="paused ? 'svg-icon:zanting' : 'svg-icon:bofang1'" :size="18"
      /></div>
      <div class="icon-button-bg" @click="seekTo(duration)">
        <Icon icon="svg-icon:xiayishou" :size="16" />
      </div>
      <div class="flex gap-[12px] items-center">
        <span class="text-[16px] text-[rgba(194,194,194,1)]">{{ formatTime(currentTime) }}</span>
        <el-slider
          v-model="sliderTime"
          :min="0"
          :max="duration"
          :step="1"
          color="#409eff"
          class="w-[351px!important]"
          @change="onSliderChange"
        />
        <span class="text-[16px] text-[rgba(194,194,194,1)]">{{ formatTime(duration) }}</span>
      </div>
      <!-- 音频 -->
      <audio
        ref="audioRef"
        :src="currentSong.audioUrl"
        :autoplay="autoplay"
        :muted="muted"
        :volume="volume / 100"
        @timeupdate="onTimeUpdate"
        @loadedmetadata="onLoadedMetadata"
        @ended="onEnded"
        @play="onPlay"
        @pause="onPause"
      ></audio>
    </div>

    <!-- 音量控制器 -->
    <div class="flex gap-[16px] items-center ml-30px">
      <Icon
        :icon="muted ? 'tabler:volume-off' : 'tabler:volume'"
        :size="20"
        class="cursor-pointer text-#999999"
        @click="toggleMute"
      />
      <el-slider
        v-model="volume"
        :min="0"
        :max="100"
        color="#409eff"
        class="w-[269px!important]"
        @change="onVolumeChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Headset } from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import durationPlugin from 'dayjs/plugin/duration'
dayjs.extend(durationPlugin)

defineOptions({ name: 'AudioBar' })

const currentSong: any = inject('currentSong', {})
const audioRef = ref<HTMLAudioElement | null>(null)
const autoplay = ref(true)
const paused = ref(true)
const muted = ref(false)
const volume = ref(80)
const currentTime = ref(0)
const duration = ref(0)
const sliderTime = ref(0)
let seeking = false

function formatTime(val: number) {
  if (!val || isNaN(val)) return '00:00'
  return dayjs.duration(val, 'seconds').format('mm:ss')
}

function togglePlay() {
  if (!audioRef.value) return
  if (audioRef.value.paused) {
    audioRef.value.play()
  } else {
    audioRef.value.pause()
  }
}

function onPlay() {
  paused.value = false
}
function onPause() {
  paused.value = true
}

function toggleMute() {
  muted.value = !muted.value
  if (audioRef.value) audioRef.value.muted = muted.value
}

function onVolumeChange(val: number) {
  if (audioRef.value) audioRef.value.volume = val / 100
}

function onTimeUpdate(e: Event) {
  if (!seeking) {
    currentTime.value = (e.target as HTMLAudioElement).currentTime
    sliderTime.value = currentTime.value
  }
}

function onLoadedMetadata(e: Event) {
  duration.value = (e.target as HTMLAudioElement).duration
}

function onSliderChange(val: number) {
  seeking = true
  if (audioRef.value) {
    audioRef.value.currentTime = val
    currentTime.value = val
  }
  seeking = false
}

function seekTo(val: number) {
  if (audioRef.value) {
    audioRef.value.currentTime = val
    currentTime.value = val
    sliderTime.value = val
  }
}

function onEnded() {
  paused.value = true
}

watch(
  () => currentSong.value.audioUrl,
  async (url) => {
    if (audioRef.value && url) {
      await nextTick()
      audioRef.value.load()
      audioRef.value.play()
      paused.value = false
      currentTime.value = 0
      sliderTime.value = 0
    }
  }
)

watch(paused, (val) => {
  currentSong.value.paused = val
})

watch(volume, (val) => {
  if (audioRef.value) audioRef.value.volume = val / 100
})
defineExpose({
  togglePlay
})
</script>
<style lang="scss" scoped>
.icon-button-bg {
  display: flex;
  width: 44px;
  height: 44px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(209.98deg, #af99ff 0%, #7283ff 100%);
  border-radius: 100%;
  justify-content: center;
  align-items: center;
}

:deep() {
  .el-slider__runway {
    height: 12px;
    background-color: #e6e6e6;
    border-radius: 126px;

    .el-slider__bar {
      height: 12px;
      background: linear-gradient(90deg, #7082ff 0%, #b79cff 100%);
      border-radius: 126px;
    }

    .el-slider__button-wrapper {
      top: -12px;
    }
  }
}
</style>
